<template>
  <el-dialog :close-on-click-modal="false" width="1200px" :title="$t('m.pick.tasknumber')" :visible.sync="popupVisible" :before-close="close">
    <el-form align="left" ref="form" :model="formInline" label-width="120px">
      <el-row>
        <el-col :span="16">
          <el-form-item :label="$t('m.out.pickingtaskcode')">
            <el-input maxlength="20" show-word-limit v-model.trim="formInline.tasknumber" @keydown.enter.native=getData></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="right">
          <el-button type="primary" @click="getData" :disabled="false" :loading="searchBtnLoading">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item :label="$t('m.location.locationcode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.locationcode" :disabled="!isPermited"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="right">
          <!-- <el-button @click="print" v-if="hasPermission('print')">{{$t('m.print')}}</el-button> -->
          <!-- 暂时屏蔽 -->
          <el-button type="danger" @click="shortage" :disabled="!isPermited">{{$t('m.pick.shortage')}}</el-button>
          <el-button type="primary" @click="submit" :disabled="!isPermited">{{$t('m.pick.confirm')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-divider></el-divider>
    <el-form align="left" ref="form" :model="picktaskform" label-width="120px" size="mini" v-show="isPermited">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.pickpop')">
            <el-input maxlength="20" show-word-limit v-model="picktaskform.pickingtaskcode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.waveordercode')">
            <el-input maxlength="20" show-word-limit v-model="picktaskform.waveordercode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.state')">
            <el-input maxlength="20" show-word-limit v-model="stateComputed" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.pickingusers')">
            <el-input maxlength="20" show-word-limit v-model="picktaskform.pickingusers" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.createdate')">
            <el-input maxlength="20" show-word-limit v-model="createdate" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- table start -->
    <el-row v-show="isPermited">
      <el-col :span="24">
         <el-table
          ref="table"
          stripe
          empty-text
          fit
          tooltip-effect="dark"
          size="mini"
          :data="tableData"
          :span-method="objectSpanMethod">
          <el-table-column align="center" prop="productspeccode" label="sku"></el-table-column>
          <el-table-column align="center" prop="suppliercode" label="supplierCode"></el-table-column>
          <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
          <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')"></el-table-column>
          <el-table-column align="center" prop="tasknumber" :label="$t('m.task')+'ID'"></el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.page.location')"></el-table-column>
          <el-table-column align="center" prop="quantity" :label="$t('m.out.quantity')"></el-table-column>
          <el-table-column align="center" prop="state" :label="$t('m.state')">
            <template slot-scope="scope">{{scope.row.state|stateFilter(lan)}}</template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- table end -->
    <el-row>
      <el-col :span="24">
        <el-button size="mini" @click="close">{{$t('m.close')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import common from '@/utils/common'
export default {
  name:'picktask-popup',
  props:['popupVisible','tasknumber'],
  data(){
    return {
      formInline:{
        tasknumber:'', // 拣货任务号
        locationcode:'',
        pickingtaskid:null
      },
      isPermited:false, // 控制【确认拣货】按钮的disabled状态
      searchBtnLoading:false, // 控制按钮loading，防止重复提交
      submitBtnLoading:false, // 控制按钮loading，防止重复提交
      picktaskform:{
        pickingtaskcode:'', // 拣货任务单
        waveordercode:'', // 波次号
        state:0, // 状态
        pickingusers:'', // 拣货员
        createdate:'' // 创建时间
      },
      tableData:[]
    }
  },
  mounted(){
    if(this.tasknumber){
      this.formInline.tasknumber = this.tasknumber
      this.getData()
    }
  },
  computed:{
    stateComputed(){
      let state =  this.picktaskform.state
      let result = ''
      switch(state){
      case 1: result=this.$t('m.out.state2'); break
      case 2: result=this.$t('m.out.state3'); break
      case 3: result=this.$t('m.pick.state9'); break
      case 4: result=this.$t('m.out.state6'); break
      }
      return result
    },
    createdate(){
      return common.timestampToTime(this.picktaskform.createdate)
    }
  },
  filters:{
    stateFilter(val,lan){
      let result = ''
      switch(val){
      case 1: result=lan('m.pick.state1'); break
      case 2: result=lan('m.out.detailState2'); break
      case 3: result=lan('m.pick.state3'); break
      case 9: result=lan('m.pick.state9'); break
      case 10: result=lan('m.pick.state10'); break
      }
      return result
    }
  },
  components:{

  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    close(){
      this.$emit('close')
    },
    // 根据拣货任务号，获取明细
    getData(){
      if(!this.formInline.tasknumber) return this.callbackMessage(this.$t('m.pick.requirePickingtaskCode'))
      let options = {
        method:'get',
        url:`/pickingtask/tasknumber/?tasknumber=${this.formInline.tasknumber}`
      }
      this.searchBtnLoading = true
      this.$axios(options).then(({ data }) => {
        this.searchBtnLoading = false
        this.isPermited = true
        this.formInline.pickingtaskid=data.pickingTask.pickingtaskid
        let {pickingtaskcode,waveordercode,state,pickingusers,createdate} = data.pickingTask
        Object.assign(this.picktaskform,{pickingtaskcode,waveordercode,state,pickingusers,createdate})
        this.tableData = this.tasknumber?[data.pickingTaskDetail.find((item)=>item.tasknumber === this.tasknumber)]:data.pickingTaskDetail
        // this.tableData = data.pickingTaskDetail
        this.ruleSpanMethod()
      }).catch(()=>{
        this.searchBtnLoading = this.isPermited = false
        this.formInline.locationcode = ''
      })
    },
    // 缺货上报
    shortage(){
      let data = this.tableData.find((item)=>item.tasknumber === this.formInline.tasknumber)
      if(!data) return this.callbackMessage(this.$t('m.pick.withoutRecord'))
      if(data.state===3) return this.callbackMessage(this.$t('m.pick.isShortage'))
      this.$emit('shortage',data)
    },
    // 确认拣货
    submit(){
      if(!this.formInline.locationcode) return this.callbackMessage(this.$t('m.pick.requireLocationCode'))
      // 匹配拣货任务单号
      let result = this.tableData.some((item)=>item.tasknumber === this.formInline.tasknumber)
      if(!result) return this.callbackMessage(this.$t('m.pick.withoutRecord'))
      // 匹配库位编码
      result = this.tableData.some((item)=>item.locationcode === this.formInline.locationcode)
      if(!result) return this.callbackMessage(this.$t('m.pick.withoutLocation'))
      // 匹配指定明细（条件：拣货任务单号+库位编码）
      result = this.tableData.find((item)=>item.tasknumber === this.formInline.tasknumber && item.locationcode === this.formInline.locationcode)
      if(!result) return this.callbackMessage(this.$t('m.pick.withoutRecord'))
      if(result.state!==1) return this.callbackMessage(this.$t('m.pick.isProhibited'))

      let options = {
        method:'put',
        url:`/pickingtask/confirm`,
        params:this.formInline
      }
      this.submitBtnLoading = true
      this.$axios(options).then(({ message }) => {
        this.submitBtnLoading = false
        this.callbackMessage(message,'success')
        this.$emit('callback')
        this.$emit('close')
      }).catch(()=>{
        this.submitBtnLoading = false
      })
    },
    // 表格缩进规则
    ruleSpanMethod(){
      let __index = 0
      let code = ''
      this.getMergeRows = []
      this.tableData.forEach((item,index)=>{
        if(!item.productspeccode){
          this.getMergeRows.push(1)
        } else if(item.productspeccode !== code){
          this.getMergeRows.push(1)
          code = item.productspeccode
          __index = index
        } else {
          if(code){
            ++this.getMergeRows[__index]
            this.getMergeRows.push(0)
          }
        }
      })
    },
    // 表格缩进
    objectSpanMethod({ rowIndex, columnIndex }){
      let MergeArr = [0,1,2,3]
      if (MergeArr.includes(columnIndex)){
        if(!this.getMergeRows.length){
          return {
            rowspan:1,
            colspan:1
          }
        } else {
          return {
            rowspan:this.getMergeRows[rowIndex],
            colspan:this.getMergeRows[rowIndex] ? 1 : 0
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>